<template>
  <div class="match-basic-wrapper">
    <el-form-item label="比赛方式："
      prop="matchMode"
      :rules="[
        {required: !0, message: '请选择比赛方式'}
      ]">
      <el-col :span="12">
        <el-select class="input-block"
          v-model="formData.matchMode"
          placeholder="请选择"
          @change="handleMatchRuleChange">
          <el-option v-for="(item, index) in matchModeList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-col>
    </el-form-item>
    <el-form-item label="比赛场序："
      v-show="tableData.length"
      prop="matchOrder"
      :rules="[
        {required: !0, message: '请完善您的比赛场序'},
        matchOrderRule
      ]">
      <el-col
        :span="tableHeaderList.length > 3 ? 24 : 20"
        :class="tableHeaderList.length > 3 ? 'min-col' : 'max-col'">
        <el-table class="group-table"
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column
            v-for="(item, index) in tableHeaderList"
            :label="item"
            :key="index">
            <template slot-scope="scope">
              <el-radio
                v-model="formData.matchOrder[index]"
                class="match-radio"
                v-for="(radio, rIndex) in scope.row.list[index]"
                :class="rIndex%2 === 0 ? 'odd-radio' : 'even-radio'"
                :label="radio.value"
                :key="rIndex"
                @input="handleRadioChange(index, $event)">{{radio.label}}</el-radio>
            </template>
          </el-table-column>
        </el-table>
        <transition name="el-zoom-in-top">
          <div class="match-result-message" v-if="formData.matchOrder.length">
            <span class="result-title">您选择的比赛场序为：</span>
            <span class="result-message">
              <template v-for="(item, index) in formData.matchOrder">{{index === 0 ? item.label : (item.label ? `——${item.label}` : '')}}</template>
            </span>
          </div>
        </transition>
      </el-col>
    </el-form-item>
  </div>
</template>
<script>
  import emitter from 'utils/emitter.js'
  import { cloneObj } from 'utils'

  import { MATCH_GROUP_SEQ_ENUM } from 'modules/components/constant'
  const CN_NUM_LIST = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
  const TABLE_RADIO_DATA = MATCH_GROUP_SEQ_ENUM.map(item => {
    return {
      checked: !1,
      label: item.label,
      value: item
    }
  })
  export default {
    mixins: [emitter],
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    created () {
      let that = this
      that.$isFirst = true // 编辑初始化使用
      this.matchOrderRule = {
        validator (rule, value = [], callback) {
          let selectLen = value.filter(k => k).length // 已选的长度
          if (selectLen !== that.formData.matchMode.value - 0) {
            callback(new Error(this.message))
          }
          callback()
        },
        message: '请完善您的比赛场序'
      }
    },
    data () {
      return {
        text: {},
        textObj: {a: 1},
        tableData: [],
        tableHeaderList: [],
        matchModeList: [
          {label: '三场制', value: {value: '3', label: '三场制'}},
          {label: '五场制', value: {value: '5', label: '五场制'}}
        ]
      }
    },
    methods: {
      handleMatchRuleChange (newVal) {
        let tabledEdit = []
        let tableDataList = []
        let tableHeaderList = []
        let matchNum = newVal.value - 0
        for (let i = 0; i < matchNum; i++) {
          tabledEdit.push('')
          tableDataList.push(cloneObj(TABLE_RADIO_DATA))
          tableHeaderList.push(`第${CN_NUM_LIST[i]}场`)
        }
        this.tableHeaderList = tableHeaderList
        this.$set(this.tableData, 0, {
          list: tableDataList
        })
        if (this.$isFirst && this.formData.matchOrder.length) {
          // 首次编辑加载 编辑加载处理 为了能正常选中
          this.$nextTick(() => {
            let orderList = this.formData.matchOrder
            orderList = orderList.map((item, index) => {
              return tableDataList[index].find(tItem => tItem.value.value === item).value
            })
            this.formData.matchOrder = orderList
          })
        } else {
          this.formData.matchOrder = tabledEdit // 初始化表单值
        }
        this.$isFirst = false
      },
      handleRadioChange () {
        let selectLen = this.formData.matchOrder.filter(k => k).length
        if (selectLen === this.formData.matchMode.value - 0) {
          this.broadcast('ElFormItem', 'el.form.change', [])
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .match-basic-wrapper{
    .group-table{
      border-left: 1px solid #f0f0f0;
      border-top: 1px solid #f0f0f0;
    }
    .max-col{
      .match-radio {
        min-width: 60px;
        margin: 6px 35px 6px 3px;
        &.even-radio{
          margin-right: 0;
        }
      }
    }
    .min-col {
      .match-radio {
        min-width: 50px;
        margin: 6px 10px 6px 3px;
        &.even-radio{
          margin-right: 0;
        }
      }
    }
    .match-result-message {
      margin-top:15px;
      .result-message{
        color: #00bb99;
      }
    }
  }
</style>

<style lang="scss">
  .match-basic-wrapper{
    .group-table.el-table{
      thead{
        th{
          text-align: center;
          .cell{
            background-color: inherit;
          }
        }
      }
      .cell{
        padding-left: 8px;
        padding-right: 8px;
        background-color: #fff;
      }
    }
  }
</style>
